<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <header>
      <div class="hair">123123</div>
    </header>
    <main class="borbox">
      <div class="swiper">
        <div class="swiper-wrapper">
          <div id="a" class="swiper-slide"></div>
          <div id="b" class="swiper-slide"></div>
          <div id="c" class="swiper-slide"></div>
        </div>
        <div class="swiper-pagination"></div>
        <!--分页器。如果放置在swiper外面，需要自定义样式。-->
      </div>
      <div class="padd-bor">
        <section class="sec-first mar-to-bot-20">
          <div class="disflex jcsb mar-bot20">
            <div class="div-left">
              <p class="today f20">今日目标</p>
              <p class="Number fontWhite font-right" id="rankText"></p>
            </div>
            <div class="div-right rel">
              <p class="today f20">累计打卡<span id="clockText"></span> 天</p>
              <div class="checkin abs" id="clockbtn">今日打卡</div>
            </div>
          </div>
          <div class="run-data disflex jcsb">
            <div class="data bor-rad20">
              <p class="fontWhite f16">运动数据</p>
            </div>
            <div class="run bor-rad20">
              <p class="f16">累计运动徽章</p>
              <div class="count f18 font-right">
                <span class="count-num" id="badgesText"></span>枚
              </div>
            </div>
          </div>
        </section>
        <section class="sec-second">
          <div class="training bor-rad20 mar-bot20">
            <p>课程训练</p>
          </div>
          <div class="outsizd bor-rad20 mar-bot20">
            <p>户外跑步</p>
          </div>
        </section>
      </div>
      <div class="foot-div"></div>
    </main>
    <footer></footer>
  </body>
</html>
